<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="ISUX">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <link rel="stylesheet" type="text/css" href="../frozen/css/frozen.css">
    <link rel="stylesheet" type="text/css" href="../css/default.css">

    <title>火堆</title>
    <link rel="stylesheet" type="text/css" href="../css/donate.css">
   
</head>
<body>

    <footer class="ui-footer ui-footer-stable ui-border-t">
        <div class="ui-footer-btns">
            <button type="button" class="btn-submit-all btn-footer btn-red">发起一起捐</button>
        </div>
    </footer>
    
    <section class="ui-container">
        <img class="img-top" src="../images/img-yqj-top.png" alt="">
        <div class="p-thumb-box">
            <div class="img-box" style="background-image:url(../images/demo/demo-p-1.jpg)"></div>
            <div class="info-box">
                <h4>3万留守儿童的渴望</h4>
                <p>和“真爱公益”一起为74所学校共29877名留守儿童筹集善款作故事盒子</p>
            </div>
        </div>

        <div class="donate-form">
            <h4>选择目标：</h4>
            <div class="ui-justify">
                <ul class="p-tag-list">
                    <li class="p-tag active"><i>不设目标</i></li>
                    <li class="p-tag">200<i>元</i></li>
                    <li class="p-tag">1000<i>元</i></li>
                    <li class="p-tag">5000<i>元</i></li>
                </ul>
            </div>
            <div class="input-box"><input type="number" placeholder="自定义金额"><i>元</i></div>
            <div class="form-bottom">
                <label class="ui-checkbox">
                    <input type="checkbox" checked="">
                </label>
                同意<a href="#" onclick="return showDeal();">《火堆用户协议》</a>
            </div>

            <div class="txt-kh">
                <h3>写个口号吸引小伙伴<i>（80字内）</i>:</h3>
                <textarea placeholder="我为这个公益项目发起筹款，为一个善意而美好的世界，我们大家一起来。"></textarea>
            </div>
        </div>

        <img class="img-bottom" src="../images/logo_and_txt.png" alt="" class="ui-introduction">


    </section>

    <div class="dialog-step">
        <div class="dialog-box">
            <h4>《火堆用户协议》</h4>
            <div class="txt">
                1.标题
                <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
                2.标题
                <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
                3.标题
                <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
                4.标题
                <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
                5.标题
                <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
            </div>
            <div class="btn-red btn-close">我知道了</div>
        </div>
    </div>

    <script src="../frozen/lib/zeptojs/zepto.min.js"></script>
    <script src="../frozen/js/frozen.js"></script>
    <script>
        $(function(){
            $('.p-tag-list .p-tag').click(function(){
                $(this).addClass('active').siblings('.p-tag').removeClass('active');
                $('.donate-form .input-box').removeClass('active');
            });

            $('.donate-form .input-box input').click(function(){
                $('.p-tag-list .p-tag').removeClass('active');
                $(this).parent().addClass('active');
            });

            $('.dialog-step .dialog-box .btn-close').click(function(){
               $('.dialog-step').removeClass('show'); 
            });
        })

        function showDeal () {
            $('.dialog-step').addClass('show');
            return false;
        }
    </script>
</body>
</html>